<template>
  <div class="Census page">
    <div style="height: 3rem; background-image: linear-gradient(-90deg, #1469fe 0%,  #2775fd 100%); position: relative; overflow: hidden;">
      <div style="text-align: center; margin-top: 0.6rem; font-size: 14px; color: #c5d6fe;">总收益(元)</div>
      <div style="font-size: 0.8rem; color: #ffffff; font-weight: bold; text-align: center; margin-top: 0.2rem;">{{ totalMoney }}</div>
    </div>
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">日期</span>
            <span class="font-blue">{{ item.date.split(' ')[0] }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">入账金额</span>
            <span class="font-red">{{ item.realIncome }}元</span>
          </div>
          <div class="list-row">
            <span class="label-text">分成比例</span>
            <span>{{ item.virtualProportion }}%</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalMoney: 0,

      search: {
        userId: this.$store.state.userInfo.userId
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },
      
      list: [],
      show: false

    };
  },
  methods: {
    getTotalMoney() {
      this.$axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', { 
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        let json = res || {};
        this.totalMoney = json.totalRevenue || 0;
      });
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { ...search, page, size };
      let url = '/api/orderFormController/shopDayIncomeInfo';
      this.$axios.get(url, query).then(res => {
        if(search.vague != this.search.vague) return ;
        let json = res || {}; 
        let list = json.list || [];
        list = list.filter(item => {
          return this.search.vague != 1 || item.deviceType;
        });
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    }
  },
  mounted() { 
    this.getTotalMoney();
    this.searchFunc();
  }
};
</script>

<style lang="less">
.Census {
  .detail-nav {
    height: 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .detail-nav-item {
      height: 0.67rem;
      line-height: 0.67rem;
      padding: 0 0.37rem;
      color: #fff;
      font-size: 14px;
      border-radius: 0.33rem;
      &.active {
        color: #4b79f1;
        background: #fff;
        font-weight: bold;
      }
    }
  }
}
</style>
